<template>
  <div class="container">
    <h3 class="h3">使用draw绘制多边形，使用modify进行修改</h3>
    <h4>
      <el-button class="bt" type="success" size="mini" @click="startDraw()"> 开始绘制</el-button>
      <el-button type="danger" size="mini" @click="endDraw()"> 停止绘制</el-button>
      <el-button type="success" size="mini" @click="startModify()"> 开始修改</el-button>
      <el-button type="danger" size="mini" @click="endModify()"> 停止修改</el-button>
      <el-button type="info" size="mini" @click="open">修改说明</el-button>
    </h4>
    <div id="vue-openlayers" />
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
// import OSM from 'ol/source/OSM'
import { XYZ } from 'ol/source'
import LayerVector from 'ol/layer/Vector'
import SourceVector from 'ol/source/Vector'
import Draw from 'ol/interaction/Draw'
import Modify from 'ol/interaction/Modify'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'
import Style from 'ol/style/Style'
import Circle from 'ol/style/Circle'
export default {
  data() {
    return {
      type: 'Polygon',
      map: null, // 地图
      draw: null,
      modify: null,
      source: new SourceVector({
        wrapX: false
      })
    }
  },
  mounted() {
    this.initMap()
  },

  methods: {
    startModify() {
      this.modify = new Modify({
        source: this.source
      })
      this.map.addInteraction(this.modify)
    },
    endModify() {
      if (this.modify !== null) {
        this.map.removeInteraction(this.modify)
      }
    },
    endDraw() {
      if (this.draw !== null) {
        this.map.removeInteraction(this.draw)
      }
    },

    startDraw() {
      if (this.draw !== null) {
        this.map.removeInteraction(this.draw)
      }

      if (this.type !== 'None') {
        this.draw = new Draw({
          source: this.source,
          type: this.type,

          style: new Style({
            fill: new Fill({
              color: '#0f0'
            }),
            stroke: new Stroke({
              width: 2,
              color: '#f00'
            }),
            image: new Circle({ // 点样式
              radius: 5,
              fill: new Fill({
                color: '#00ff00'
              })
            })
          })
        })
        this.map.addInteraction(this.draw)
      }
    },
    initMap() {
      const raster = new Tile({
        source: new XYZ({
          url: 'http://{a-c}.tile.openstreetmap.de/{z}/{x}/{y}.png'
        })
      })

      const vector = new LayerVector({
        source: this.source,
        style: new Style({
          fill: new Fill({
            color: '#00f'
          }),
          stroke: new Stroke({
            width: 2,
            color: '#ff0'
          }),
          image: new Circle({ // 点样式
            radius: 5,
            fill: new Fill({
              color: '#ff0000'
            })
          })
        })
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [raster, vector],
        view: new View({
          projection: 'EPSG:4326',
          center: [113.1206, 23.034996],
          zoom: 10
        })
      })
    },
    open() {
      const h = this.$createElement
      this.$notify({
        title: '说明',
        message: h('i', { style: 'color: teal' }, '绘制完图形后，点击“开始修改”，将鼠标移动到图形上，长按进行拖到修改'),
        duration: 15000
      })
    }
  }
}
</script>
<style scoped>
.container {
  width: 1240px;
  height: 690px;
  margin: 50px auto;
  border: 1px solid #42b983;
}
#vue-openlayers {
  width: 1200px;
  height: 550px;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid #42b983;
  position: relative;
}
.h3 {
  text-align: center;
}
.bt{
  margin-left: 400px;
}
</style>

